<template>
  <div class="main device-container">
    <div class="park-header">停车场信息</div>
    <div class="park-main">
      <div class="park-left-box">
        <Left></Left>
      </div>
      <div class="park-right-box">
        <Right :cardata="cardata"></Right>
      </div>
    </div>
  </div>
</template>

<script>
import Left from './components/Left'
import Right from './components/Right'
import api from 'api'
import formatDate from 'filters/format-date'

export default {
  name: 'Device',

  components: {
    Left,
    Right
  },

  data () {
    return {
      cardata: [
      ]
    }
  },

  created () {
    let _self = this
    // api预留
    let carArr = [
      {
        'orderId': 77, 'parkName': '保利天悦1期', 'plateNo': '粤A12345', 'entryTime': '20170319162111', 'payTime': '20170101122111', 'leaveTime': '20170317182122', 'orderType': 1, 'stayTime': 50, 'amount': 111, 'payWay': '0', 'leaveWay': '1', 'entryGate': 1, 'leaveGate': 0, 'leasestate': 1
      },
      {
        'orderId': 28, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170319112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 78, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170319152111', 'payTime': '20170101122111', 'leaveTime': '20170316153022', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '3', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 15, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170319162111', 'payTime': '20170101122111', 'leaveTime': '20170316162111', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '0', 'leaveWay': '1', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 23, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 16, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320172111', 'payTime': '20170101122111', 'leaveTime': '20170316172111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '3', 'leaveWay': '1', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 27, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170319112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 14, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170319182111', 'payTime': '20170101122111', 'leaveTime': '20170317082111', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '4', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 24, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 11, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320192111', 'payTime': '20170101122111', 'leaveTime': '20170317053022', 'orderType': 1, 'stayTime': 50, 'amount': 211, 'payWay': '6', 'leaveWay': '1', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 12, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320122111', 'payTime': '20170101122111', 'leaveTime': '20170316143022', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '0', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 13, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170320112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 22, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170316112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 10, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170316162111', 'payTime': '20170101122111', 'leaveTime': '20170316092111', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '6', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 30, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170316162111', 'payTime': '20170101122111', 'leaveTime': '20170316092111', 'orderType': 2, 'stayTime': 50, 'amount': 221, 'payWay': '4', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 25, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170316112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      },
      {
        'orderId': 26, 'parkName': '保利天悦1期', 'plateNo': '粤A12497', 'entryTime': '20170316112111', 'payTime': '20170101122111', 'orderType': 1, 'stayTime': 50, 'amount': 221, 'payWay': '5', 'leaveWay': '0', 'entryGate': 0, 'leaveGate': 1, 'leasestate': 1
      }
    ]
    carArr.forEach(item => {
      item.entryTime = _self.timeHandle(item.entryTime)
      if (item.leaveTime) {
        item.leaveTime = _self.timeHandle(item.leaveTime)
      } else {
        item['leaveTime'] = ''
      }
      if (!item.amount) {
        item['amount'] = 0
      }
      if (!item.leaveWay) {
        item['leaveWay'] = ''
      }
      if (item.leaseState === 0) {
        return
      }
    })
    //   // 将数据添加如vuex
    //   _self.$store.dispatch('updatParkStatus', {
    //     id: item.orderId,
    //     amount: item.amount,
    //     payWay: item.payWay,
    //     leaveWay: item.leaveWay,
    //     entryTime: item.entryTime,
    //     leaveTime: item.leaveTime,
    //     orderType: item.orderType
    //   })
    // })

    // this.cardata = carArr
  },

  mounted () {
    this.getCarOrders()
  },

  methods: {
    getCarOrders () {
      this.cardata = []
      let rangeList = []
      let endTime = new Date()
      let hour = endTime.getHours()
      let lastDayTime = endTime - 24 * 3600 * 1000
      // 昨天分组
      let lastDayTimeStr = formatDate(lastDayTime, 'yyyyMMdd', true)
      for (let i = 0; i < 24; i++) {
        let hourStr = ''
        if (i < 10) {
          hourStr += '0' + i
        } else {
          hourStr += i
        }
        rangeList.push({
          start: lastDayTimeStr + hourStr + '0000',
          end: lastDayTimeStr + hourStr + '5959'
        })
      }
      let todayTimeStr = formatDate(endTime, 'yyyyMMdd', true)
      for (let i = 0; i <= hour; i++) {
        let hourStr = ''
        if (i < 10) {
          hourStr += '0' + i
        } else {
          hourStr += i
        }
        rangeList.push({
          start: todayTimeStr + hourStr + '0000',
          end: todayTimeStr + hourStr + '5959'
        })
      }

      let count = rangeList.length
      let resp = 0
      let intervalId = setInterval(() => {
        if (rangeList.length) {
          let range = rangeList.pop()
          api.parkingLot.getOrders(range.start, range.end).then((res) => {
            resp++
            res.data.result.forEach((item) => {
              item.entryTime = this.timeHandle(item.entryTime)
              if (item.leaveTime) {
                item.leaveTime = this.timeHandle(item.leaveTime)
              } else {
                item['leaveTime'] = ''
              }
              if (!item.amount) {
                item['amount'] = 0
              }
              if (item.leaseState === 1) {
                return
              }
            })

            this.cardata = this.cardata.concat(res.data.result)

            if (resp === count) {
              this.cardata = this.cardata.sort((a, b) => {
                let aTime
                let bTime
                if (a.leaveTime) {
                  aTime = +new Date(a.leaveTime)
                } else {
                  aTime = +new Date(a.entryTime)
                }

                if (b.leaveTime) {
                  bTime = +new Date(b.leaveTime)
                } else {
                  bTime = +new Date(b.entryTime)
                }

                return bTime - aTime
              })
              let update = []
              this.cardata.forEach((item) => {
                update.push({
                  id: item.orderId,
                  amount: item.amount,
                  payWay: item.payWay,
                  leaveWay: item.leaveWay,
                  entryTime: item.entryTime,
                  leaveTime: item.leaveTime,
                  orderType: item.orderType
                })
              })
              this.$store.dispatch('updatParkStatus', update)
            }
          })
        } else {
          clearInterval(intervalId)
        }
      }, 50)
    },
    // 传进来数据格式20170101122111
    // 传出去的格式出2017/01/01 12:21:11
    timeHandle (time) {
      let year = time.substr(0, 4)
      let month = time.substr(4, 2)
      let day = time.substr(6, 2)
      let hour = time.substr(8, 2)
      let minute = time.substr(10, 2)
      let second = time.substr(12, 2)
      return year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/stylus/base'

.device-container {
  .park-header{
    font-size 24px
    font-weight 200
    line-height 24px
    padding 20px 0 10px 20px
    box-sizing border-box
  }
  padding: 52px 400px 40px 0;
  font-size: 0;
  color: #fff;
  box-sizing border-box
  .park-main{
    height 100%
    overflow: hidden;
    .park-left-box {
      float: left;
      width: 100%;
      height: 100%;
      padding: 0px 0px 10px 20px;
      box-sizing: border-box;
    }

    .park-right-box {
      position absolute
      right 0px
      top 106px
      padding-bottom 32px
      display: inline-block;
      margin-right 20px
      width: 380px
      height: 90%;
      box-sizing border-box
    }
  }
}
</style>
